<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
    <script src="<%=request.getContextPath() %>/assets/js/echarts.js"></script>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 100%;height:100%;"></div>
    <div id="mainone" style="width: 100%;height:100%;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
        		 tooltip : {
        		        trigger: 'axis',
        		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
        		            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        		        }
        		    },
        		    legend: {
        		        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他']
        		    },
        		    grid: {
        		        left: '3%',
        		        right: '4%',
        		        bottom: '3%',
        		        containLabel: true
        		    },
        		    xAxis : [
        		        {
        		            type : 'category',
        		            data : ['周一','周二','周三','周四','周五','周六','周日']
        		        }
        		    ],
        		    yAxis : [
        		        {
        		            type : 'value'
        		        }
        		    ],
        		    series : [
        		        {
        		            name:'直接访问',
        		            type:'bar',
        		            data:[320, 332, 301, 334, 390, 330, 320]
        		        },
        		        {
        		            name:'邮件营销',
        		            type:'bar',
        		            stack: '广告',
        		            data:[120, 132, 101, 134, 90, 230, 210]
        		        },
        		        {
        		            name:'联盟广告',
        		            type:'bar',
        		            stack: '广告',
        		            data:[220, 182, 191, 234, 290, 330, 310]
        		        },
        		        {
        		            name:'视频广告',
        		            type:'bar',
        		            stack: '广告',
        		            data:[150, 232, 201, 154, 190, 330, 410]
        		        },
        		        {
        		            name:'搜索引擎',
        		            type:'bar',
        		            data:[862, 1018, 964, 1026, 1679, 1600, 1570],
        		            markLine : {
        		                lineStyle: {
        		                    normal: {
        		                        type: 'dashed'
        		                    }
        		                },
        		                data : [
        		                    [{type : 'min'}, {type : 'max'}]
        		                ]
        		            }
        		        },
        		        {
        		            name:'百度',
        		            type:'bar',
        		            barWidth : 5,
        		            stack: '搜索引擎',
        		            data:[620, 732, 701, 734, 1090, 1130, 1120]
        		        },
        		        {
        		            name:'谷歌',
        		            type:'bar',
        		            stack: '搜索引擎',
        		            data:[120, 132, 101, 134, 290, 230, 220]
        		        },
        		        {
        		            name:'必应',
        		            type:'bar',
        		            stack: '搜索引擎',
        		            data:[60, 72, 71, 74, 190, 130, 110]
        		        },
        		        {
        		            name:'其他',
        		            type:'bar',
        		            stack: '搜索引擎',
        		            data:[62, 82, 91, 84, 109, 110, 120]
        		        }
        		    ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
     <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('mainone'));
        function randomData() {
            now = new Date(+now + oneDay);
            value = value + Math.random() * 21 - 10;
            return {
                name: now.toString(),
                value: [
                    [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                    Math.round(value)
                ]
            }
        }

        var data = [];
        var now = +new Date(1997, 9, 3);
        var oneDay = 24 * 3600 * 1000;
        var value = Math.random() * 1000;
        for (var i = 0; i < 1000; i++) {
            data.push(randomData());
        }
        // 指定图表的配置项和数据
        var optionone = {
        		  title: {
        		        text: '动态数据 + 时间坐标轴'
        		    },
        		    tooltip: {
        		        trigger: 'axis',
        		        formatter: function (params) {
        		            params = params[0];
        		            var date = new Date(params.name);
        		            return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
        		        },
        		        axisPointer: {
        		            animation: false
        		        }
        		    },
        		    xAxis: {
        		        type: 'time',
        		        splitLine: {
        		            show: false
        		        }
        		    },
        		    yAxis: {
        		        type: 'value',
        		        boundaryGap: [0, '100%'],
        		        splitLine: {
        		            show: false
        		        }
        		    },
        		    series: [{
        		        name: '模拟数据',
        		        type: 'line',
        		        showSymbol: false,
        		        hoverAnimation: false,
        		        data: data
        		    }]
       };
        setInterval(function () {

            for (var i = 0; i < 5; i++) {
                data.shift();
                data.push(randomData());
            }

            myChart.setOption({
                series: [{
                    data: data
                }]
            });
        }, 1000);
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(optionone);
    </script>